import React, {
    Component,
} from 'react'
import { connect } from 'react-redux';
import { View, Text, Image, StyleSheet } from 'react-native'
import { AssetImages } from '../constants'
import { Px } from '../utils'

class PetFriendsItem extends Component {

    static propTypes = {

    };

    // 生命周期
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    // render part
    render() {
        return (
            <View style={styles.container}>
                <Image
                    source={AssetImages.DEFAULT_FACE_IMAGE}
                    style={styles.headImage}
                />
                <View style={styles.rightView}>
                    <Text>一个养猫的人，阿达马莎莎才能</Text>
                    <View style={styles.petImages}>
                        <Image
                            style={styles.petHead}
                            source={AssetImages.DEFAULT_PET_IMAGE}
                        />
                        <Image
                            style={styles.petHead}
                            source={AssetImages.DEFAULT_PET_IMAGE}
                        />
                    </View>
                </View>
                
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        paddingHorizontal: Px(30),
        paddingVertical: Px(12)
    },
    rightView: {
        marginLeft: Px(30),
        justifyContent: 'center'
    },
    headImage: {
        width: Px(120),
        height: Px(120)
    },
    petImages: {
        flexDirection: 'row',
        marginTop: Px(10)
    },
    petHead: {
        width: Px(70),
        height: Px(70),
        marginRight: Px(20)
    }
})

export default connect(state => ({

})
)(PetFriendsItem)